<template>
  <div class="p-3">
    <t-enhanced-table
      row-key="menuId"
      :params="formData"
      :hasPagination="false"
      :columns="columns"
      :data="menuList"
      :loading="loading"
      :tree="treeConfig"
      v-model:expandedTreeNodes="expandedTreeNodes"
    >
      <template #topContent>
        <t-form class="table-form" :data="formData" layout="inline" @submit="getData">
          <t-form-item label="菜单名称">
            <t-input v-model="formData.menuName" placeholder="搜索菜单名称" clearable></t-input>
          </t-form-item>
          <t-form-item label="状态">
            <t-select
              v-model="formData.status"
              placeholder="搜索状态"
              :options="dict.dict_enable_list"
              clearable
            >
            </t-select>
          </t-form-item>
          <t-button v-auth="'system:menu:query'" type="submit">确定</t-button>
          <t-button v-auth="'system:menu:add'" class="ml-3" @click="handleEdit()"
            >新增菜单</t-button
          >
        </t-form>
      </template>
      <template #operation="{ row }">
        <t-link
          v-auth="'system:menu:edit'"
          theme="primary"
          hover="color"
          @click.stop="handleEdit(row)"
        >
          编辑
        </t-link>
        <t-link
          v-auth="'system:menu:add'"
          theme="primary"
          class="ml-2"
          hover="color"
          @click.stop="handleEdit(row, 'add')"
        >
          新增
        </t-link>
        <d-pop-btn
          v-auth="'system:menu:remove'"
          class="ml-2"
          tips="是否确认删除该菜单？"
          @click.stop="handleDel(row)"
          >删除</d-pop-btn
        >
      </template>
    </t-enhanced-table>
    <add ref="dialog" @success="getData" />
  </div>
</template>

<script setup lang="jsx">
import add from './add.vue'
import { ref, computed } from 'vue'
import { del } from '@common'
import { getOptionLabel } from '@common'
import { useDict } from '@/store/dict'
import { useSystem } from '@/store/system'
import { MessagePlugin } from 'tdesign-vue-next'
const formData = ref({})
const dialog = ref(false)
const loading = ref(false)
const menuList = ref([])
const system = useSystem()
const expandedTreeNodes = ref([])
const dict = useDict()
const columns = computed(() => {
  return [
    { title: '菜单名称', colKey: 'menuName', width: 300 },
    {
      title: '权限标识',
      colKey: 'perms',
      ellipsis: true,
      width: 120,
      cell: (_, { row }) => row.perms || '--'
    },
    {
      title: '菜单类型',
      colKey: 'menuType',
      width: 90,
      cell: (_, { row }) => getOptionLabel(dict.menu_type_list, row.menuType)
    },
    { title: '图标', colKey: 'icon', width: 70, cell: (_, { row }) => <t-icon name={row.icon} /> },
    { title: '排序', colKey: 'orderNum', width: 70 },
    {
      title: '状态',
      colKey: 'status',
      width: 60,
      cell: (_, { row }) => {
        const { status } = row
        return <d-status list={dict.dict_enable_list} value={status} />
      }
    },
    { title: '创建时间', colKey: 'createTime', width: 170 },
    { title: '操作', colKey: 'operation', width: 150 }
  ]
})
const treeConfig = ref({
  treeNodeColumnIndex: 0,
  indent: 25,
  expandTreeNodeOnClick: true
})
const getData = async () => {
  loading.value = true
  const res = await system.getMenuList({
    ...formData.value
  })
  menuList.value = res.treeList
  loading.value = false
}
const handleEdit = (row, type) => {
  let params = { ...row }
  if (type == 'add' && row) {
    params = { parentId: row.menuId }
  }
  console.log(params, '=-=')
  dialog.value.show(params)
}
const handleDel = async (item) => {
  await del(`system/menu/${item.menuId}`)
  MessagePlugin.success('删除成功')
  getData()
}
getData()
</script>
